<!-- 电表详情 -->
<template>
    <div class="echart" id="mychart" :style="myChartStyle" :key="key"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'waterHourEcharts',
    props: ['dir'],
    components: {},
    data() {
        return {
            myChart: null,
            key: Math.random(),
            xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //横坐标
            yData: [23, 24, 18, 25, 27, 28, 25], //数据
            myChartStyle: {float: 'left', width: '100%', height: '280px'} //图表样式
        }
    },
    created() {},
    computed: {
        cDir() {
            return this.dir
        }
    },
    watch: {
        cDir(newVal) {
            console.log(newVal)
            this.myChart.resize()
        }
    },
    mounted() {
        this.getMonth()
        this.initEcharts()
    },
    methods: {
        getMonth() {
            const days = 24
            let xData = []
            let yData = []
            for (let index = 1; index <= days; index++) {
                xData.push(index + '时')
                yData.push(parseInt(index * Math.random() * 10000))
            }
            this.xData = xData
            this.yData = yData
            console.log(days)
        },
        initEcharts() {
            // 基本柱状图
            const option = {
                title: {
                    text: '',
                    subtext: '                  m³'
                },
                grid: {
                    top: '15%',
                    bottom: '28%',
                    left: '5%',
                    right: '1%'
                },
                xAxis: {
                    data: this.xData,
                    axisLabel: {
                        // interval: 0 // 强制显示所有标签
                        // rotate: 30 // 通过旋转解决标签显示不下的问题
                    }
                },
                yAxis: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[0]
                        return tar.name + ' : ' + tar.value + 'm³'
                        // return tar.name + "<br/>" + tar.seriesName + " : " + tar.value
                    }
                },
                series: [
                    {
                        type: 'line', //形状为柱状图
                        data: this.yData,
                        itemStyle: {
                            color: '#2680FB'
                        }
                    }
                ]
                // dataZoom: [
                //     {
                //         show: true, // 显示滚动条
                //         type: 'slider', // 滚动条类型
                //         backgroundColor: 'rgb(19, 63, 100)', // 背景颜色
                //         fillerColor: 'rgb(16, 171, 198)', // 选中范围的填充颜色
                //         borderColor: 'rgb(19, 63, 100)', // 边框颜色
                //         showDetail: false, // 拖拽时是否显示详细数值信息
                //         startValue: 0, // 数据窗口范围的起始数值
                //         endValue: 5, // 数据窗口范围的结束数值
                //         filterMode: 'empty', // 当前数据窗口外的数据被设置为空
                //         width: '50%', // 滚动条宽度
                //         height: 8, // 滚动条高度
                //         left: 'center', // 滚动条显示位置
                //         zoomLock: true, // 锁定选择区域的大小
                //         handleSize: 5, // 控制手柄的尺寸
                //         bottom: '14%' // 滚动条距离容器下侧的距离
                //     },
                //     {
                //         type: 'inside', // 内部滚动条
                //         zoomOnMouseWheel: false, // 滚轮是否触发缩放
                //         moveOnMouseMove: true, // 鼠标移动触发平移
                //         moveOnMouseWheel: true // 鼠标滚轮触发平移
                //     }
                // ]
            }
            const myChart = echarts.init(document.getElementById('mychart'))
            myChart.setOption(option)
            this.myChart = myChart
        }
    }
}
</script>

<style scoped></style>
